// 获取DOM元素
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTask');
const todoList = document.getElementById('todoList');
const filterBtns = document.querySelectorAll('.filter-btn');

// 存储待办事项的数组
let todos = JSON.parse(localStorage.getItem('todos')) || [];
let currentFilter = 'all';

// 初始化应用
function init() {
    renderTodos();
    addTaskBtn.addEventListener('click', addTask);
    taskInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') addTask();
    });
    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            filterBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            currentFilter = btn.dataset.filter;
            renderTodos();
        });
    });
}

// 添加新任务
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText) {
        const newTodo = {
            id: Date.now(),
            text: taskText,
            completed: false
        };
        todos.push(newTodo);
        saveTodos();
        renderTodos();
        taskInput.value = '';
    }
}

// 切换任务状态
function toggleTask(id) {
    todos = todos.map(todo => {
        if (todo.id === id) {
            return { ...todo, completed: !todo.completed };
        }
        return todo;
    });
    saveTodos();
    renderTodos();
}

// 删除任务
function deleteTask(id) {
    todos = todos.filter(todo => todo.id !== id);
    saveTodos();
    renderTodos();
}

// 编辑任务
function editTask(id) {
    const todo = todos.find(todo => todo.id === id);
    const newText = prompt('编辑任务:', todo.text);
    if (newText !== null && newText.trim() !== '') {
        todos = todos.map(todo => {
            if (todo.id === id) {
                return { ...todo, text: newText.trim() };
            }
            return todo;
        });
        saveTodos();
        renderTodos();
    }
}

// 保存到本地存储
function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

// 渲染任务列表
function renderTodos() {
    let filteredTodos = todos;
    if (currentFilter === 'active') {
        filteredTodos = todos.filter(todo => !todo.completed);
    } else if (currentFilter === 'completed') {
        filteredTodos = todos.filter(todo => todo.completed);
    }

    todoList.innerHTML = filteredTodos.map(todo => `
        <li class="todo-item ${todo.completed ? 'completed' : ''}">
            <input type="checkbox" class="todo-checkbox" 
                ${todo.completed ? 'checked' : ''} 
                onclick="toggleTask(${todo.id})">
            <span class="todo-text">${todo.text}</span>
            <div class="todo-actions">
                <button class="edit-btn" onclick="editTask(${todo.id})">编辑</button>
                <button class="delete-btn" onclick="deleteTask(${todo.id})">删除</button>
            </div>
        </li>
    `).join('');
}

// 启动应用
init(); 